import '../test.css'
import classNames from 'classnames'
import { DatePicker } from 'antd'
const { RangePicker } = DatePicker
import moment from 'moment'
import { useMemo, useRef, useState } from 'react'
import { useSelector } from 'react-redux'

function About() {
  const [date, setDate] = useState('2025-06')
  const { billList } = useSelector(state => state.bill)
  const { count } = useSelector(state => state.counter)
  console.log('billList', billList, count)
  const dateConfirm = val => {
    console.log(val)
    setDate(val)
  }
  const monthGroup = useMemo(() => {
    //return 出去计算之后的值
    return (billList || []).map(item => item.time)
  })
  console.log(monthGroup)
  return (
    <div>
      <div className="calendar">
        <div className="inner-calendar"></div>
        <div className={classNames('calendar-title')}>
          {date + ''}月账单<span>^</span>
        </div>
        <div className="down-calendar">
          <div className="down-item">
            <span>100</span>
            <span>支出</span>
          </div>
          <div className="down-item">
            <span>200</span>
            <span>收入</span>
          </div>
          <div className="down-item">
            <span>300</span>
            <span>余额</span>
          </div>
        </div>
      </div>
      <RangePicker showTime defaultValue={[]} onOk={dateConfirm} />
      {/* defaultValue={new Date()} */}
    </div>
  )
}

export default About
